//获取元素
const card = document.querySelector('.card');
const moved = document.querySelector('.moved');
const profile = document.querySelector('.profile');
const reject = document.querySelector('.reject');
const accept = document.querySelector('.accept');
const accept_img = document.querySelector('.accept img');
const bg = document.querySelector('.bg-color');
//样式开始与结束样式
let start = -40;
let end = 40;
//动画对象 两个
let animation_zheng = anime({
    targets: [moved, bg, profile],
    translateY: [start, end],
    direction: 'alternate',
    loop: true,
    endDelay: 0,
    autoplay: false,
    easing: 'easeInOutSine'
});
let animation_fan = anime({
    targets: [moved, bg, profile],
    translateY: [end, start],
    direction: 'alternate',
    loop: true,
    endDelay: 0,
    autoplay: false,
    easing: 'easeInOutSine'
});

//函数用来获取元素的 translateY 的值
function getTranslateY(el){
    return parseInt(anime.get(el, 'translateY'));
}

//函数用来设置元素的 translateY 的值
function setTranslateY(el, value){
    anime.set(el, {
        translateY: value + 'px'
    })
}

//绑定事件
card.addEventListener('touchstart', function (e) {
    //获取触摸开始的位置
    this.y = e.changedTouches[0].clientY;
    this.t = getTranslateY(moved);
    //获取头像的位置
    this.profile_t = getTranslateY(profile);
    //获取挂断图标起始位置的
    this.reject_t = getTranslateY(reject);
    //获取接听图标起始位置的
    this.accept_t = getTranslateY(accept);
    //停止动画
    animation_zheng.pause();
    animation_fan.pause();
    //阻止默认行为
    e.preventDefault();
});

//绑定触摸移动事件
card.addEventListener('touchmove', function (e) {
    this._y = e.changedTouches[0].clientY;
    //计算向量
    let disT = this._y - this.y;
    //修改移动元素与背景的位置
    setTranslateY(moved, this.t + disT);
    setTranslateY(bg, this.t + disT);
    //修改头像的位置
    setTranslateY(profile, this.profile_t + disT);
    //获取触摸移动后 moved 的 translateY
    let moved_translateY = getTranslateY(moved);
    //检测 -225px   
    if (moved_translateY <= -225) {
        //修改挂断图片的位置
        setTranslateY(reject, this.reject_t + (moved_translateY + 225))
    }
    //检测接通方向
    if (moved_translateY >= 225) {
        //修改挂断图片的位置 0  0   225   135
        setTranslateY(accept, this.accept_t + (moved_translateY - 225));
    } else {
        //处理元素的角度
        if(moved_translateY >= 0){
            let degree =  -135 * moved_translateY / 225;
            accept_img.style.transform = `rotate(${degree}deg)`
        }
    }
    //图标显示隐藏
    //两个按钮的隐藏
    if (moved_translateY >= 100) {
        reject.style.visibility = 'hidden'
    } else {
        reject.style.visibility = 'visible';
    }

    if (moved_translateY <= -400) {
        accept.style.visibility = 'hidden'
    } else {
        accept.style.visibility = 'visible';
    }
});

//绑定触摸结束事件
card.addEventListener('touchend', function (e) {
    //检测是否为接听和挂断
    if(getTranslateY(moved) > 225){
        card.style.display = 'none';
        alert('接听中.....');
        return;
    }
    if(getTranslateY(moved) < -225){
        card.style.display = 'none';
        alert('挂断....');
        return;
    }
    //图标显示隐藏
    recovery();
});

//样式复原
function recovery(){
    //动画复原
    if(getTranslateY(moved) > 0){
        //动画进入最顶部
        anime({
            targets: [moved, bg, profile],
            translateY: start,
            easing: 'easeInOutCubic',
            duration: 200,
            begin: function(){
                //两个图标都要处于显示状态
                reject.style.visibility = 'visible';
                accept.style.visibility = 'visible';
            },
            complete: function(){
                animation_zheng.restart();
            }
        })
    }else if(getTranslateY(moved) < 0){
        //动画进入最底部
        anime({
            targets: [moved, bg, profile],
            translateY: end,
            easing: 'linear',
            duration: 200,
            complete: function(){
                //两个图标都要处于显示状态
                reject.style.visibility = 'visible';
                accept.style.visibility = 'visible';
                animation_fan.restart();
            }
        })
    }
}

function init(){
    card.style.transform = 'translateY(-3000px)';
    //两秒后开始
    setTimeout(() => {
        anime({
            targets: card,
            translateY: [-3000, 0],
            easing: 'easeInOutSine',
            autoplay: true,
            complete: function(){
                animation_fan.play();
            }
        })
    }, 1000)
}
init();
